<template>
  <div class="coupon">
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">礼包流水</div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table size="mini" :data="tableData">
          <el-table-column type="index" align="center" label="">
          </el-table-column>
          <el-table-column
            prop="backImg"
            align="center"
            width="100"
            label="图片"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 40px; height: 40px;"
                :src="scope.row.backImg"
              >
                <div slot="error" class="image-slot">
                  <el-image
                    :src="require('../../assets/img/lolo.png')"
                  ></el-image>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="createByName"
            align="center"
            label="用户名"
          ></el-table-column>
          <el-table-column prop="total" align="center" label="金额">
            <template slot-scope="scope">
              <span>{{ scope.row.total }}元</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="couponPackName"
            align="center"
            label="购买礼包"
          ></el-table-column>
          <el-table-column
            prop="createAt"
            align="center"
            label="购买时间"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import { getPackOrderList } from "../../api/couponPack";

export default {
  components: {
    Pagination
  },
  data() {
    return {
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 1
      },
      tableData: []
    };
  },

  created() {
    this.getCouponOrderList();
  },

  methods: {
    //获取礼包列表
    async getCouponOrderList() {
      let req = {
        size: this.pageparm.pageIndex,
        pageIndex: this.pageparm.pageIndex
      };
      const res = await getPackOrderList(req);
      if (res.code == 200) {
        let { items, totalCount } = res.data;
        this.tableData = items;
        this.pageparm.total = totalCount;
      } else {
        this.$message.error(res.message);
      }
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this.getCouponOrderList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 80vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
  .title {
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    margin-bottom: 10px;
  }
  .add {
    .el-input {
      margin-left: 20px;
    }
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .active {
    color: green !important;
  }
}
.el-input {
  max-width: 300px !important;
}
input {
  text-align: center;
  border-radius: 5px;
  width: 40px;
  height: 25px;
  outline: none;
  margin: 0 10px;
  border: 1px solid #ccc;
}
</style>
